<template>
    <div class="addContent">
        <div class="order">
            <span style="white-space:pre"></span><span class="line"></span>
            <span style="white-space:pre"></span><span class="txt">竞赛基本信息</span>
            <span style="white-space:pre"></span><span class="line"></span>
        </div>
        <div class="compContent">
            <el-form ref="form" label-width="80px" :rules="rules" :model="formData">
                <el-form-item label="竞赛名称" prop="compttitionName">
                    <el-input v-model="formData.compttitionName" placeholder=""></el-input>
                </el-form-item>

                <el-form-item label="主办方" prop='sponsor'>
                    <el-input v-model="formData.sponsor" placeholder="请输入主办方"></el-input>
                </el-form-item>

                <el-form-item label="协办单位">
                    <div class="co_organizer">
                        <el-input 
                            v-model="item.name" 
                            class="input"
                            v-for="(item,index) in co_organizer"
                            :key="index"
                            suffix-icon="el-icon-close"
                            v-show="item.isShow"
                        ></el-input>
                        <el-button 
                            type="primary" 
                            class="button" 
                            @click="addCo_organizer" 
                            icon="el-icon-plus"
                        >添加</el-button>
                    </div>
                    
                </el-form-item>

                <el-form-item label="类型">
                    <div class="competitionType">
                        <div class="btns" ref="type">
                            <div @click="selectType($event,'个人赛')">
                                个人赛
                            </div>
                            <div @click="selectType($event,'双人赛')">
                                双人赛
                            </div>
                            <div @click="selectType($event,'多人赛')">
                                多人赛
                            </div>
                        </div>
                        <!-- <div class="typeInpts" v-show="isShowLimit">
                            <el-input placeholder="最少人数" class="input" v-model="minLimit"></el-input>
                            <el-input placeholder="最多人数" class="input" v-model="maxLimit"></el-input>
                        </div> -->
                    </div>
                </el-form-item>

                <el-form-item label="是否收费">
                    <div class="fee">
                        <el-radio v-model="isFree" :label="true">免费</el-radio>
                        <el-radio v-model="isFree" :label="false">收费</el-radio>
                        <el-input v-model="formData.fee" placeholder="请输入金额" class="input" v-show="!isFree"></el-input>
                    </div>
                </el-form-item>

                <el-form-item label="是否线下">
                    <el-radio v-model="isNotOnline" :label="true">线下</el-radio>
                    <el-radio v-model="isNotOnline" :label="false">线上</el-radio>
                </el-form-item>

                <el-form-item label="竞赛类别" prop="category">
                    <el-cascader
                        placeholder="请选择竞赛类别"
                        v-model="formData.category"
                        :options="categoryList"
                        :props="{
                            value:'id',
                            label:'name',
                            children:'value'
                        }"
                    >
                    </el-cascader>
                </el-form-item>

                <el-form-item label="竞赛等级" prop="level">
                    <el-select v-model="formData.level" placeholder="请选择竞赛等级">
                        <el-option 
                            v-for="(item,index) in levels"
                            :key="index"
                            :label="item" 
                            :value="item"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="报名时间" prop="apply_start_date">
                    <el-date-picker
                        v-model="formData.apply_start_date"
                        type="datetime"
                        placeholder="选择报名开始时间"
                        default-time="12:00:00"
                        class="datePicker"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item prop="apply_end_date">
                    <el-date-picker
                        v-model="formData.apply_end_date"
                        type="datetime"
                        placeholder="选择报名结束时间"
                        default-time="12:00:00"
                        class="datePicker"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="比赛时间" prop="race_start_date">
                    <el-date-picker
                        v-model="formData.race_start_date"
                        type="datetime"
                        placeholder="选择比赛开始时间"
                        default-time="12:00:00"
                        class="datePicker"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item prop="race_end_date">
                    <el-date-picker
                        v-model="formData.race_end_date"
                        type="datetime"
                        placeholder="选择比赛结束时间"
                        default-time="12:00:00"
                        class="datePicker"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="奖项设置" prop="awards">
                    <div class="co_organizer">
                        <el-input 
                            v-model="item.name" 
                            class="input"
                            v-for="(item,index) in formData.awards"
                            :key="index"
                            suffix-icon="el-icon-close"
                            v-show="item.isShow"
                        ></el-input>
                        <el-button 
                            type="primary" 
                            class="button" 
                            @click="addAwards" 
                            icon="el-icon-plus"
                        >添加</el-button>
                    </div>
                </el-form-item>

                <div class="detail">
                    比赛详情
                </div>
                <div class="editor">
                    <Editor ref="editor"></Editor>
                </div>

                <div class="detail">
                    比赛封面
                </div>
                <SelectCover ref="cover"></SelectCover>
            </el-form>
            <!-- 是否上传附件 -->
            <div class="accessory">
                <span class="span detail">上传附件</span>
                <span class="text">仅支持pdf文件，每个文件小于5M，若需更改，请重新点击上传文件按钮</span>
                <div class="accessoryContent">
                    <input type="file" ref="inputAccessory" multiple class="input" accept=".pdf" @change="selectAccessory(true)">
                    <div class="uploadText" @click="uploadAccessory">点击上传附件</div>
                    <div v-for="(file,index) in accessoryURL" :key="index">
                        <a :href="file.url" v-show="file.url" target="_blank">{{file.name}},点击进行预览</a>
                    </div>
                </div>
            </div>
            <div class="publish">
                <el-button type="primary" class="btn" @click="submitData">发布</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import Editor from '@/components/Editor'
import {getCategoryList,uploadCover,uploadAccessory,publishCompetition} from '@/api/competition'
import SelectCover from '@/components/selectCover'
import { getCookie } from '@/utils/cookie'
export default {
    name:'add',
    components:{Editor,SelectCover},
    data() {
        return {
            //搜集的数据
            co_organizer:[],//协办单位
            // awards:[{name:'',isShow:true}],//奖项设置
            formData:{
                compttitionName:'',//竞赛名称
                sponsor:'',//主办方，
                type:'',//类别
                fee:'',//收费
                level:'',//竞赛等级
                category:'',//选中的类别id，数组第二个值为类别id
                apply_start_date:'',//报名开始时间
                apply_end_date:'',//报名结束时间
                race_start_date:'',//比赛开始时间
                race_end_date:'',//比赛结束时间
                awards:[]
            },
            accessoryURL:[],//用户选择的所有附件

            // 功能变量
            isShowLimit:false,
            minLimit:'',//最少人数
            maxLimit:'',//最多人数
            isFree:true,//是否免费
            isNotOnline:true,//是否线下

            categoryList:[],
            levels:['校级','市级','省级','全国性','全球性','自由'],
            rules:{
                compttitionName:[
                    {required:true,message:'请输入竞赛名称',trigger:'blur'}
                ],
                sponsor:[
                    {required:true,message:'请输入主办方',trigger:'blur'}
                ],
                type:[
                    {required:true,message:'请选择类别',trigger:'blur'}
                ],
                category:[
                    {required:true,message:'请选择竞赛类别',trigger:'change'}
                ],
                level:[
                    {required:true,message:'请选择竞赛等级',trigger:'change'}
                ],
                race_start_date:[
                    {required:true,message:'请将内容填写完整',trigger:'blur'}
                ],
                apply_end_date:[
                    {required:true,message:'请将内容填写完整',trigger:'blur'}
                ],
                apply_start_date:[
                    {required:true,message:'请将内容填写完整',trigger:'blur'}
                ],
                race_end_date:[
                    {required:true,message:'请将内容填写完整',trigger:'blur'}
                ],
                awards:[
                    {required:true,message:'请添加奖项',trigger:'blur'}
                ]
            }
        }
    },
    watch:{
        
    },
    mounted(){
        //获取比赛类别
        getCategoryList().then(res=>{
            this.categoryList = res.data.list
        })
        //初始化比赛类型
        this.$refs.type.children[0].classList.add('selected')
        this.formData.type = '个人赛'
    },
    methods:{
        //添加协办单位
        addCo_organizer(){
            this.co_organizer.push({name:'',isShow:true})
        },
        //选择类型
        selectType(e,type){
            let typeList = this.$refs.type.children
            for(let i=0;i<typeList.length;i++){
                typeList[i].classList.remove('selected')
            }
            e.target.classList.add('selected')
            if(type=='多人赛'){
                this.type = type
                this.isShowLimit = true
            }else{
                this.type = type
                this.isShowLimit = false
            }
            console.log(this.type)
        },
        //添加奖项设置
        addAwards(){
            this.formData.awards.push({name:'',isShow:true})
        },
        //上传附件
        uploadAccessory(){
            this.$refs.inputAccessory.click()
        },
        //选择附件
        async selectAccessory(isAdd){
            // isAdd表示是否是添加文件
            let files = this.$refs.inputAccessory.files
            //如果已经选择了文件，就返回该数据，且是添加新文件
            if(files.length>0&&isAdd){
                for(let i=0;i<files.length;i++){
                    if(files[i].size/1024/1024>5){
                        Message({
                            type:'error',
                            showClose: true,
                            duration:1000,
                            message:'上传文件过大！，请重新选择'
                        })
                        return
                    }
                }
                // console.log(files.length)
                //循环获取文件链接，并进行操作
                for(let i=0;i<files.length;i++){
                    let newURl = URL.createObjectURL(files[i])
                    this.accessoryURL.push({
                        name:files[i].name,
                        url:newURl
                    })
                }
                //如果调用该函数，如果有数据就返回文件对象，由其他函数调用时进行获取
                return files
            }else if(files.length==0&&isAdd){
                return ''
            }else if(files.length>0&&!isAdd){
                return files
            }else{
                return ''
            }
        },
        //提交数据
        async submitData(){
            this.$refs.form.validate(async (valid)=>{
                let flag = true
                if(this.$refs.editor.html=='<p><br></p>'){
                    this.$refs.editor.isShowError = true
                    flag = false
                }
                if(this.$refs.cover.URL==''){
                    this.$refs.cover.isShowCoverError = true
                    flag = false
                }
                if(!(valid&&flag)){
                    document.documentElement.scrollTop=0
                    this.$message({
                        type:'error',
                        showClose:true,
                        duration:1000,
                        message:'请将信息填写完整'
                    })
                }else{
                    let awards = this.formData.awards.filter((item)=>{
                        return item.name!=''&&item.isShow==true
                    })
                    let co_organizer = this.co_organizer.filter((item)=>{
                        return item.name!=''&&item.isShow==true
                    })
                    let atlas_id
                    // if(this.$refs.cover.selectCover()){
                        const ConverData = new FormData()
                        ConverData.append('up',this.$refs.cover.coverFile)
                        atlas_id = await uploadCover(ConverData)
                        atlas_id = atlas_id.data.atlas_id
                    // }
                    //附件名称
                    let accessory
                    // if(await this.selectAccessory(false)){
                        const accessoryData = new FormData()
                        let files = await this.selectAccessory(false)
                        for(let i=0;i<files.length;i++){
                            accessoryData.append('up',files[i])
                        }
                        accessory =await uploadAccessory(accessoryData)
                        accessory = accessory.data.data
                    // }

                    let info = {
                        sponsor:this.formData.sponsor,
                        competition_name:this.formData.compttitionName,
                        regist_start_time:this.formData.apply_start_date,
                        regist_end_time:this.formData.apply_end_date,
                        race_start_time:this.formData.race_start_date,
                        race_end_time:this.formData.race_end_date,
                        competition_content:this.$refs.editor.html,
                        competition_type:this.formData.type,
                        fee:this.formData.fee!=''? this.formData.fee:0,
                        isOffline:this.isNotOnline,
                        isPublish:true,
                        category_id:this.formData.category[1],
                        level:this.formData.level,
                        address:'暂时没有使用',
                        awards_setting:JSON.stringify(awards),
                        co_organizer:JSON.stringify(co_organizer),
                        atlas_id,
                        accessory:JSON.stringify(accessory),
                        user_uid:getCookie('uid'),

                    }

                    publishCompetition(info).then(res=>{
                        if(res.status=200){
                            this.$router.push({
                                name:'competitonList'
                            })
                        }
                    })
                    console.log(info)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
//基本信息标题
.order{
    margin-top: 35px;
    height: 60px;
    line-height:60px;
    text-align: center;
}
.order .line {
    display: inline-block;
    width: 100px;
    border-top: 1px solid #d3d3d3;
}
.order .txt {
    color: #555;
    vertical-align: middle;
    font-size: 18px;
    margin: 0px 25px;
    font-weight: 900;
    font-style: bold;
    font-family: 'Microsoft YaHei';
}
//全局样式
.addContent{
    width:800px;
    margin: 0px auto;
}

//协办方
.co_organizer{
    display: flex;
    flex-wrap: wrap;
    .input{
        width:250px;
        margin-right: 20px;
        margin-bottom: 10px;
    }
    .button{
        margin-left: 15px;
        height: 41px;
    }
}

//比赛类型
.competitionType{
    display: flex;
}
.btns{
    display: flex;
    div{
        width: 70px;
        height: 40px;
        margin-right: 15px;
        text-align: center;
        border-radius: 4px;
        border: 1px dotted rgb(102, 177, 255);
        color: rgb(102, 177, 255);
        transition:all 0.3s linear;
        &:hover{
            cursor: pointer;
            color: white;
            background-color: rgb(102, 177, 255);
        }
    }
    .selected{
        color: white;
        background-color: rgb(102, 177, 255);
    }
}
.typeInpts{
    display: flex;
    .input{
        width: 100px;
        margin: 0px 10px;
    }
}

// 费用输入框
.fee{
    .input{
        width:110px;
    }
}

//时间日期选择器
.datePicker{
    width: 250px;
    margin-right: 15px;
}

//比赛详情标题
.detail{
    font-size: 14px;
    font-weight: 900;
    margin-top: 20px;
    // font-family: 'Microsoft Yahei';
    margin-bottom: 15px;
    margin-left: 12px;
    color: rgb(96, 98, 102);
}

.publish{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 70px;
    .btn{
        padding: 10px 60px;
    }
}

//上传附件
.accessory{
    margin-top: 30px;
    .text{
        font-size: 10px;
        color: rgb(160, 160, 160);
    }
    .accessoryContent{
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        .input{
            display: none;
        }
        .uploadText{
            padding: 10px 20px;
            background-color:rgb(64, 158, 255);
            width: 140px;
            border-radius: 3px;
            color: white;
            &:hover{
                cursor: pointer;
            }
        }
        a{
            display: inline-block;
            margin-left: 20px;
            margin-top: 10px;
            color:rgb(64, 158, 255);
            &:hover{
                text-decoration: underline;
            }
        }
    }
}
</style>